<template>
  <!-- 增改用户弹框 -->
  <hcDialog
    dialogWidth="680px"
    :dialogTitle="options.type === 'add' ? '新增用户' : '编辑用户'"
    customClass="hymson-dialog user-dialog"
    :isVisable="options.show"
    :isFooter="true"
    @closeDialog="closeFun"
    @save="saveDialog(formRef)"
  >
    <el-form ref="formRef" :model="form" :rules="rules" label-width="100px" class="add-user-ruleForm" status-icon>
      <el-row>
        <el-col :span="12">
          <el-form-item label="用户名" prop="name">
            <el-input v-model="form.name" placeholder="请输入用户名" maxlength="30" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="昵称" prop="nick">
            <el-input v-model="form.nick" placeholder="请输入用户昵称" maxlength="30" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="用户性别">
            <el-select v-model="form.sex" placeholder="请选择">
              <el-option label="男" :value="0"></el-option>
              <el-option label="女" :value="1"></el-option>
              <el-option label="未知" :value="2"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="年龄" prop="age">
            <el-input-number v-model="form.age" controls-position="right" :min="0" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="手机号码" prop="phone">
            <el-input v-model="form.phone" placeholder="请输入手机号码" maxlength="11" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="form.email" placeholder="请输入邮箱" maxlength="50" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="账户名" prop="userName">
            <el-input v-model="form.userName" placeholder="请输入账户名" maxlength="30" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="用户密码" :prop="props.options.type === 'add' ? 'password' : ''">
            <el-input
              v-model="form.password"
              placeholder="请输入用户密码"
              type="password"
              maxlength="20"
              show-password
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="ID卡号" :prop="props.options.type === 'add' ? 'cardId' : ''">
            <el-input v-model="form.cardId" placeholder="请输入ID卡号" maxlength="20" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="角色">
            <el-select v-model="form.roleIds" multiple placeholder="请选择">
              <el-option
                v-for="item in list"
                :key="item.id"
                :label="item.roleName"
                :value="item.id"
                :disabled="!item.state"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="状态">
            <el-radio-group v-model="form.state">
              <el-radio :label="true">正常</el-radio>
              <el-radio :label="false">停用</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="备注">
            <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="简介">
            <el-input v-model="form.introduction" type="textarea" placeholder="请输入简介"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </hcDialog>
</template>

<script setup name="UserDialog">
import { reactive, ref, toRefs, watch } from 'vue'
import useTable from '@/hooks/useTable'
const { list } = useTable('/Role', false) // false 不要分页
const emit = defineEmits(['onSure', 'onCancel'])

const props = defineProps({
  options: {
    type: Object,
    default: () => {
      return {
        show: false,
        type: 'add', // 用于判断是编辑还是删除 add edit
        curUser: null, // 当前编辑的用户
      }
    },
  },
})

const formRef = ref()

const data = reactive({
  form: {
    name: '', // 用户名
    nick: '', // 昵称
    sex: 2, // 用户性别
    age: 1, // 年龄
    phone: '', // 手机号码
    email: '', // 邮箱
    userName: '', // 账户名
    password: '', // 用户密码
    cardId: '', // 用户卡号
    orderNum: 0, // 排序
    state: true, // 状态
    roleIds: [], // 菜单权限
    introduction: '', // 简介
    remark: '', // 备注
  },
  rules: {
    name: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
    email: [{ required: true, message: '请输入邮箱', trigger: 'blur' }],
    userName: [{ required: true, message: '请输入账户名', trigger: 'blur' }],
    cardId: [{ required: true, message: '请输入用户卡号', trigger: 'blur' }],
    password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
  },
})

// 添加、修改用户
const saveDialog = async formEl => {
  if (!formEl) return
  await formEl.validate(valid => {
    if (valid) {
      emit('onSure', {
        form: JSON.parse(JSON.stringify(data.form)),
        type: props.options.type,
        id: props.options.curUser?.id, // 用于编辑的id
      })
      closeFun()
    }
  })
}

// 关闭弹框
const closeFun = () => {
  data.form = {
    name: '', // 用户名
    nick: '', // 昵称
    sex: 0, // 用户性别
    age: 1, // 年龄
    phone: '', // 手机号码
    email: '', // 邮箱
    userName: '', // 账户名
    password: '', // 用户密码
    cardId: '', // 用户卡号
    orderNum: 0, // 排序
    state: true, // 状态
    roleIds: [], // 菜单权限
    introduction: '', // 简介
    remark: '', // 备注
  }
  formRef.value.resetFields()
  emit('onCancel')
}

watch(
  () => props.options,
  val => {
    if (val.type === 'edit') {
      const curUser = JSON.parse(JSON.stringify(val.curUser))
      for (let key in data.form) {
        data.form[key] = curUser[key]
        data.form.roleIds = curUser.roles.map(role => role.id)
      }
    }
  },
  { deep: true },
)

const { form, rules } = toRefs(data)
</script>

<style lang="scss">
.user-dialog.el-dialog {
  .add-user-ruleForm {
    padding: 0 20px 0 0;
    .el-form-item__label {
      flex: none;
      font-size: 16px;
      font-weight: 600;
      display: flex;
      align-items: center;
    }
    .el-form-item__content {
      .el-select,
      .el-input,
      .el-input-number {
        flex: none;
        width: 100%;
      }
    }
  }
}
</style>
